// var num = 0;
requirejs(['./config'], () => {
  requirejs(['template', 'header', 'footer'], (template, header) => {
    class ShopCart {
      constructor() {
        this.init()
        this.calcTotalMoney()
        this.checksChange()
        this.allChecked()
        this.allCheckBtn()
        this.choosed()
        this.cut5(header)
        this.add5(header)
        this.delSingle5(header)
        this.delSelect(header)

      }
      init() {
        let cart = localStorage.getItem('cart')

        if (cart) {
          // 购物车不为空，就渲染购物车数据
          $('.shopMessage').show()
          $('.nullCart').hide()
          this.cart = JSON.parse(cart)
          let html = template('shopCart-template', { cart: this.cart })
          $('.shopMessage').html(html)
        } else {
          // 代表购物车为空，显示提示信息

          $('.shopMessage').hide()
          $('.nullCart').show()
        }
      }
      calcTotalMoney() {
        // 根据localStorage的数据从0开始算总价
        let cart = localStorage.getItem('cart');
        // console.log(!cart)
        if (!cart) {
          $('#cartShopNum5').html('0')
        }
        if (cart) {
          this.cart = JSON.parse(cart);
          let allMoney = this.cart.reduce((money, shop) => {
            if (shop.check) money += shop.num * shop.price;
            return money;
          }, 0)
          $('#allMoney').html(allMoney)
        } else {
          $('#allMoney').html(0)
        }
      }
      // -------------单选按钮----------------------------
      checksChange() {
        let _this = this
        $('.check').on('change', function () {
          let num = 0;

          // 把localStorage的数据check属性关联单选框的状态
          const id = Number($(this).parents('.shop-top').attr('data-id'))
          // 根据id找到当前数据，修改check属性
          _this.cart = _this.cart.map(shop => {

            // prop 一般就是用与获取或者修改表单元素的影响数据的属性，比如下拉菜单的select,按钮的disabled,选框的checked
            if (shop.id === id) { shop.check = $(this).prop('checked') }

            if (shop.check) {
              num++
              // console.log(num)
              if (num == _this.cart.length) {
                $('#spanALL').prop('checked', true)
              } else { $('#spanALL').prop('checked', false) }
            } else {
              num--
              // console.log(num)
              if (num < 0) { $('#spanALL').prop('checked', false) }
            }
            return shop

          })
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          _this.calcTotalMoney()
          _this.choosed()
          _this.allChecked()
        })
      }
      // -------------全选按钮------------------
      allCheckBtn() {
        const _this = this
        $('#spanALL').on('change', function () {
          // 更改页面是的选择状态
          if ($(this).prop('checked')) {
            $(".check").prop('checked', true)
          } else {
            $(".check").prop('checked', false)
          }

          _this.cart = _this.cart.map(shop => {
            // prop 一般就是用与获取或者修改表单元素的影响数据的属性，比如下拉菜单的select,按钮的disabled,选框的checked
            shop.check = $(this).prop('checked')
            return shop
          })
          localStorage.setItem('cart', JSON.stringify(_this.cart))
          _this.calcTotalMoney()
          _this.choosed()
          _this.allChecked()
        })
      }
      // -------------全选按钮的初始状态--------------------
      allChecked() {
        let _this = this
        try {
          let amount = this.cart.reduce((leng, shop) => {
            if (shop.check) {
              leng++
              return leng
            }
          }, 0)
          if (amount == this.cart.length) {
            $('#spanALL').prop('checked', true)
          }
        } catch (err) {

        }



      }


      // -------------------加减数量-----------------------------
      cut5(header) {
        // let cart = localStorage.getItem('cart')
        const _this = this
        $(".cut").on('click', function () {
          let cart = localStorage.getItem('cart')
          cart = JSON.parse(cart)
          if (parseInt($(this).siblings('.num').html()) == 1) {
            $(this).siblings('.num').html(1)
          } else {
            const id = Number($(this).parents('.shop-top').attr('data-id'))
            cart = cart.map(shop => {
              if (shop.id === id) { shop.num-- }
              return shop
            })
            $(this).siblings('.num').html(parseInt($(this).siblings('.num').html()) - 1)
            $(this).parents('.shopNum').siblings('.shopSubtotal').html(Number($(this).parents('.shopNum').siblings('.shopPrice').children('.bb').html()) * Number($(this).siblings('.num').html()))
            localStorage.setItem('cart', JSON.stringify(cart));
            _this.calcTotalMoney()
            _this.choosed()
            header.showCartTotalNum()
            

          }

        })
      }

      add5(header) {
        const _this = this
        $(".add").on('click', function () {
          let cart = localStorage.getItem('cart')
          cart = JSON.parse(cart)
          const id = Number($(this).parents('.shop-top').attr('data-id'))
          cart = cart.map(shop => {
            if (shop.id === id) { shop.num++ }
            return shop
          })
          $(this).siblings('.num').html(parseInt($(this).siblings('.num').html()) - 0 + 1)
          $(this).parents('.shopNum').siblings('.shopSubtotal').html(Number($(this).parents('.shopNum').siblings('.shopPrice').children('.bb').html()) * Number($(this).siblings('.num').html()))
          localStorage.setItem('cart', JSON.stringify(cart));
          _this.calcTotalMoney()
          _this.choosed()
          header.showCartTotalNum()
         

        })
      }

      // ------------已选商品数量---------------------
      choosed() {
        let cart = localStorage.getItem('cart');
        if (cart) {
          cart = JSON.parse(cart);
          let allNum = cart.reduce((allnum, shop) => {
            if (shop.check) allnum += shop.num;
            return allnum;
          }, 0)
          $('.totalNum').html(allNum)

        } else {
          $('.totalNum').html(0)
        }
      }
      //--------------删除单个商品---------------------- 
      delSingle5(header) {
        let _this = this
        $(".delSingle").on('click', function () {
          if (confirm('您确定要删除吗？')) {
            let cart = localStorage.getItem('cart')
            if (cart) {
              cart = JSON.parse(cart);
              const id = Number($(this).parents('.shop-top').attr('data-id'))
              cart = cart.filter(shop => {
                if (shop.id != id) return shop
              })
              if (cart.length === 0) {
                localStorage.removeItem('cart')
                $('.shopMessage').hide()
                $('.nullCart').show()
                _this.choosed()
                _this.checksChange()
                _this.calcTotalMoney()
                $('#spanALL').prop('checked', false)
              } else {
                localStorage.setItem('cart', JSON.stringify(cart));
                $(this).parents().parents('.shop-top').remove()
                _this.calcTotalMoney()
                _this.choosed()
                _this.checksChange()
                _this.allChecked()
                header.showCartTotalNum()
                

              }
            }
          }
        })
      }


      //--------------批量删除商品---------------------- 
      delSelect(header) {
        let _this = this
        $('.spanDelete').on('click', function () {
          if (confirm('您确定要删除吗？')) {
            let cart = localStorage.getItem('cart')
            if (cart) {
              cart = JSON.parse(cart);
              $('.check').each(function () {
                if ($(this).prop('checked') === true) {
                  const id = Number($(this).parents('.shop-top').attr('data-id'))
                  cart = cart.filter(shop => {
                    if (shop.id != id) {
                      return shop
                    }
                  })
                  $(this).parents('.shop-top').remove()
                  _this.choosed()
                  _this.allChecked()
                  header.showCartTotalNum()
                

                }
              })
            }
            if (cart.length === 0) {
              localStorage.removeItem('cart')
              $('.shopMessage').hide()
              $('.nullCart').show()
              _this.calcTotalMoney()
              _this.choosed()
              $('#spanALL').prop('checked', false)
            } else {
              localStorage.setItem('cart', JSON.stringify(cart));
              _this.calcTotalMoney()
              _this.choosed()
              header.showCartTotalNum()
              
            }
          }
        })

      }




    }
    new ShopCart();
  })
})
